<template>
    <div class="box">
        <div class="myHead">
            <div class="an" @click="fanHui"><van-icon name="arrow-left"  color="#f0f0f0"/></div>
            <div class="ti">喵喵</div>
        </div>
        <form action="/">
        <van-search
            v-model="value"
            show-action
            placeholder="请输入搜索关键词"
           @search="onSearch"
            />
        </form>
       <div class="box1" v-if="jian">
           <ul>
               <li v-for="(item,index) in arr"
               :key="(index)"
               @click="xianqing(item.id)"
               >
                   <div class="box2">
                       <div class="tubox">
                           <img :src="item.img" alt="">
                       </div>
                       <div class="use">
                           <div class="headline">
                               <div>{{item.nm}}</div>
                               <div v-if="item.sc">{{item.sc}}分</div>
                               <div v-if="!item.sc">{{item.wish}}人想看</div>

                           </div>
                           <div class="zz">{{item.enm}}</div>
                           <div class="cat">{{item.cat}}</div>
                           <div class="time">{{item.rt}}</div>
                       </div>
                   </div>
                   <div class="gou">购票</div>
               </li>
           </ul>
       </div>
       <div v-if="jian" @click="tiao" class="genDuo">
           更多
       </div>
       <div class="lishi">
           <ul v-if="it">
               <li  v-for="(item,index) in brr"
               :key="index"
               >
                <div class="li-box">
                    <img src="../assets/images/时钟.png" alt="">
                    <div @click="nei(item)" class="nei">{{item}}</div>
                    <div class="shan" @click="shan(index)">删除</div>
                </div>
               </li>
           </ul>
       </div>
       <div class="cinema" v-if="jian">
           <div class="cinema-box">影院</div>
           <ul>
               <li v-for="(item,index) in crr"
               :key="index"
               >
               <div class="cinema-box1">
                   <div class="cinema-box2">{{item.info.name}}  <span>{{item.info.price}}</span><span>元起</span></div>
                   <div class="cinema-box3">{{item.info.address}}</div>
                    <div class="cinema-biaoQian-box" v-if="item.info.tags">
                        <div v-for="(item,index) in item.info.tags"
                        :key="index"
                        class="cinema-biaoQian"
                        >
                        {{item}}
                        </div>
                    </div>
               </div>
               </li>
           </ul>
       </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      value: null,
      arr:null,//数据数组
      jian:false,//判断数据
      brr:[],// 历史记录数据
      it :true,//隐藏搜索历史
      crr:[],//搜索影院数组
    };
  },
  watch:{
      value(){
          
          if (this.value.length == 0) {
              this.arr = []
              this.jian =false
              this.it =true
              
          }else{
              
        //       let are = this.axios.get( `https://apis.netstart.cn/maoyan/search/suggest?kw=${this.value}&cityId=1`).catch(err=>{
        //      console.log(err);
        //    })
        //    are.then(re=>{
        //        console.log(re);
        //        this.arr = re.data.movies.list
        //        this.jian =true
        //        this.it = false
               

               

        //    })
         
          }
    
    },
  },
  methods: {
     
    //   删除历史记录
       shan(a){
     this.brr.forEach((item,index)=>{
         if(index == a){
              this.brr.splice(index, 1);
         }
     })
     localStorage.setItem('Lishi',JSON.stringify(this.brr));


      },
      nei(a){
          this.value = a
      },
      //更多
      tiao(){
        
          this.$router.push({path:"/genDuo",query:{value :this.value}})
      },
    //   搜索建议
      fanHui(){
          this.$router.back()
      },
    //   回车触发事件
    onSearch(val) {
    //   Toast(val);
      console.log(val);
       if (this.value.length == 0) {
              this.arr = []
              this.jian =false
              this.it =true
              
          }else{
            // 列表数据
              let are = this.axios.get( `https://apis.netstart.cn/maoyan/search/suggest?kw=${this.value}&cityId=1`).catch(err=>{
             console.log(err);
           })
           are.then(re=>{
               console.log(re);
               this.arr = re.data.movies.list
               this.jian =true
               this.it = false
               

               

           })
                // 影院数据
           let cinema = this.axios.get(`https://apis.netstart.cn/maoyan/search/cinemas?keyword=${this.value}&ci=1`).catch(err=>{
             console.log(err);
             
           })
           cinema.then(re=>{
               console.log(re.data,"影院");
               this.crr = re.data
           })

         
          }
           //判断本地储存
          if (typeof localStorage.Lishi == "undefined") {

    
        this.brr.push(this.value)
          localStorage.setItem('Lishi',JSON.stringify(this.brr));

   // console.log("没有");

  } else {

   // console.log("有");
      let kda = JSON.parse(localStorage.getItem('Lishi')) 
        this.brr = kda
        this.brr.push(this.value)
      this.brr =   [...new Set(this.brr)];
          localStorage.setItem('Lishi',JSON.stringify(this.brr));

  }
    
      
    },
    onCancel() {
    //   Toast('取消');
    },
    // 历史记录
      xianqing(a){
      this.$router.push({name:'XiangQing',params:{id:a}})

        //判断本地储存

// if (typeof localStorage.Lishi == "undefined") {

    
//         this.brr.push(this.value)
//           localStorage.setItem('Lishi',JSON.stringify(this.brr));

//    // console.log("没有");

//   } else {

//    // console.log("有");
//       let kda = JSON.parse(localStorage.getItem('Lishi')) 
//         this.brr = kda
//         this.brr.push(this.value)
//       this.brr =   [...new Set(this.brr)];
//           localStorage.setItem('Lishi',JSON.stringify(this.brr));

//   }

    },
  },
  created(){
      this.it = true 
     
        //判断本地储存

if (typeof localStorage.Lishi == "undefined") {

    

   console.log("没有");

  } else {

   // console.log("有");
      let kda = JSON.parse(localStorage.getItem('Lishi'))
        this.brr = kda
        

  }

  }
};


</script>
<style lang="less" scoped>
.box{

    .myHead{
        width: 100%;
        height: 50px;
        background-color: #e54847!important;
        display: flex;
        // vertical-align: middle;
        line-height: 50px;
        
        .an{
            padding: -0 10px;

        }
        .ti{
            font-size: 20px;
            color: white;
            margin-left: 33%;
        }

    }
    .box1{
        width: 100%;
        box-sizing: border-box;
        padding: 10px;
        ul{
            li{
                position: relative;
                .gou{
                    position: absolute;
                    right: 5px;
                    top: 50%;
                    text-align: center;
                    font-size: 10px;
                    padding: 1px;
                    box-sizing: border-box;
                    width: 42px;
                    height: 20px;
                    border: 1px solid red;
                    border-radius: 15px;
                    color: white;
                    background-color: #e54847;
                }
                border-top: 1px solid #f0f0f0;
                border-bottom: 1px solid #f0f0f0;
                padding: 10px 0;

                .box2{
                    display: flex;
                    .tubox{
                        width: 64px;
                        height: 90px;
                        img{
                            width: 64px;
                            height: 90px;
                        }

                    }
                    .use{
                        box-sizing: border-box;
                        width: 80%;
                        >div{
                            margin-bottom: 5px;
                            color: #666;

                        }
                        margin-left: 15px;
                        font-size: 15px;
                        flex: 2;
                        .headline{
                            display: flex;
                            justify-content: space-between;
                            box-sizing: border-box;
                            >div{
                                font-size: 10px;
                                &:nth-child(1){
                                    white-space:nowrap;
                                    overflow:hidden;
                                     text-overflow:ellipsis;
                                    font-size: 17px;
                                    font-weight: 700;
                                    color: black;
                                    width: 65%;

                                }
                                &:nth-child(2){
                                    margin-left: auto;
                                    color: #FFBC00;
                                    margin-right: 5px;
                                    font-size: 15px;
                                }
                            }

                        }
                        .zz{
                            color: #666;
                              width: 150px;
                             white-space:nowrap;
                            overflow:hidden;
                             text-overflow:ellipsis;

                        }
                        .time{
                            color: #666;
                              white-space:nowrap;
                            overflow:hidden;
                             text-overflow:ellipsis;

                        }
                    }
                }
            }
        }
    }
    .genDuo{
        font-size: 15px;
        color: red;
        text-align: center;
    }
    .lishi{
        padding: 0 10px;
        ul{
            li{
                font-size: 15px;
                margin: 10px 0;
                .li-box{
                    display: flex;
                    img{
                        width: 15px;
                        height: 15px;
                        vertical-align: text-top;
                        margin-left: 15px;
                        margin-top: 3px;

                    }
                    .nei{
                        margin-left: 15px;

                    }
                    .shan{
                        margin-left: auto;
                    }
                   
                }
            }
        }
    }
    .cinema{
        .cinema-box{
            font-size: 15px;
            padding: 10px 10px;
            border-bottom: 1px solid #f0f0f0;
            color: #999;
        }
        ul{
            li{
                width: 100%;
                padding: 20px;
                box-sizing: border-box;
                border-bottom: 1px solid #f0f0f0;
                .cinema-box1{
                    .cinema-box2{
                        margin-bottom: 10px;
                        font-size: 17px;
                        font-weight: 400;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        span{
                            vertical-align: text-top;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            font-size: 10px;
                            display: inline-block;
                            color: #999;
                            &:nth-child(1){

                                
                                color: red;
                                font-size: 17px;
                                font-weight: 300;
                            }
                        }
                    }
                    .cinema-box3{
                        font-size: 10px;
                        color: #999;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;

                    }
                     .cinema-biaoQian-box{
                         margin-top: 10px;
                         font-size: 10px;
                         display: flex;

                        .cinema-biaoQian{
                            margin: 0 5px;
                            border-radius: 2px;
                            padding: 1px 2px;   
                            &:nth-child(odd){
                                  white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                            border: 1px solid  #589daf;
                            color: #589daf;


                            }
                             &:nth-child(even){
                                   white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                            border: 1px solid #f90;
                            color: #f90;



                            }


                        }
                    }

                }
            }
        }
       

    }
    
}
</style>